<template>
    <div class="exchange_log app-container">
        <el-card>
            <el-form :inline="true" :model="formInfo" :rules="queryRules" ref="formInfo" size="mini">
                <el-form-item label="游戏:" prop="gameId">
                    <el-select v-model="formInfo.gameId" clearable filterable placeholder="请选择游戏">
                        <el-option v-for="item in gameList" :key="item.gameId" :label="item.gameName" :value="item.gameId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="cdk类:" prop="cdkTypeId">
                    <el-select v-model="formInfo.cdkTypeId" clearable filterable placeholder="请选择cdk类">
                        <el-option v-for="item in cdkTypeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="指定cdk:" prop="cdk">
                    <el-input v-model="formInfo.cdk" clearable ></el-input>
                </el-form-item>
                <el-form-item label="时间范围:" prop="timeRange">
                    <el-date-picker v-model="formInfo.timeRange" type="datetimerange" unlink-panels :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card :loading="pageLoading" style="margin-top:20px" >
            <el-alert v-if="cdkTypeIsValid !== null" :title="'tips：该cdk类' + (cdkTypeIsValid === 0 ? '未过期' : '已过期')" :type="cdkTypeIsValid === 0 ? 'success' : 'error'" :closable="false"> </el-alert>
            <el-table style="margin-top:10px" :data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)" border height="60vh">
                <el-table-column v-for="item in tableHeader" :key="item.prop" :prop="item.prop" :label="item.label" align="center" :show-overflow-tooltip="true" :sortable="item.label == '操作' ? false : true">
                    <!-- <template slot-scope="scope">
                            <template v-if="item.prop == 'cdkTypeId'">
                                <span >{{ scope.row.cdkTypeId }}</span>
                                <el-tag v-if="cdkTypeIsValid === 0" :disable-transitions="true" type="success">未失效</el-tag>
                                <el-tag v-else type="danger" :disable-transitions="true">已失效</el-tag>
                            </template>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template> -->
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableDataListLen" align="center" style="padding-top:10px">
            </el-pagination>
        </el-card>

    </div>
</template>
<script>
import { getExchangeLog } from "@/api/exchange";


import { getCdkTypeList } from "@/api/cdkType";
import { getAuthGameList } from "@/api/game";



export default {
    name: 'ExchangeLogIndex',
    data () {
        return {
            pageLoading: false,
            tableData: [],
            tableDataListLen: 0,
            pageInfo: {
                currentPage: 1,
                pageSizes: [50, 80, 100, 150],
                pageSize: 50,
            },

            gameList: [],
            cdkTypeList: [],

            tableHeader: [
                { prop: "cdkTypeId", label: "cdk类Id" },
                { prop: "cdkey", label: "cdkey" },
                { prop: "bUserId", label: "用户Id" },
                { prop: "bUseTime", label: "使用时间" },
            ],
            cdkTypeIsValid: null,

            queryRules: {
                timeRange: [{ required: true, message: "请选择时间范围", trigger: "blur" }],
                gameId: [{ required: true, message: "请选择游戏", trigger: "blur" }],
                cdkTypeId: [{ required: true, message: "请选择cdk类", trigger: "blur" }],
            },
            formInfo: {
                gameId: null,
                cdkTypeId: null,
                timeRange: [],
                cdk:"",
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    mounted () {
        this.getGameList()
    },
    watch: {
        "formInfo.gameId": function (nVal) {
            this.formInfo.cdkTypeId = null
            if (nVal) {
                this.getCdkTypeList()
            }

        }
    },
    methods: {
        // 获取游戏列表
        async getGameList () {
            const { data } = await getAuthGameList()
            this.gameList = data || []
        },
        // 获取cdkType列表
        async getCdkTypeList () {
            const params = {
                gameId: this.formInfo.gameId,
            }
            const { data } = await getCdkTypeList(params)
            this.cdkTypeList = data.results || []
        },
        //查询
        onSubmit () {
            this.$refs.formInfo.validate((valid) => {
                if (valid) {
                    this.getAjax();
                }
            });
        },
        async getAjax () {
            this.pageLoading = true;
            let params = {
                startTime: this.formInfo.timeRange[0],
                endTime: this.formInfo.timeRange[1],
                gameId: this.formInfo.gameId,
                cdkTypeId: this.formInfo.cdkTypeId,
                cdk:this.formInfo.cdk
            }
            try {
                const { data } = await getExchangeLog(params)
                this.tableData = data?.result || []
                this.cdkTypeIsValid = data?.inValid// 0 未失效 1已失效
                this.tableDataListLen = this.tableData.length

                // this.$refs.dataTable.doLayout()
                // this.$refs.dataTable.bodyWrapper.scrollTop = 0

                this.pageLoading = false;
            } catch (err) {
                console.log(err)
                this.pageLoading = false;
            }
        },

        //分页
        handleSizeChange (pageSize) {
            this.pageInfo.pageSize = pageSize
        },
        handleCurrentChange (currentPage) {
            this.pageInfo.currentPage = currentPage
        },
    }
}
</script>
<style scoped lang="scss">
</style>